<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'CirqueChart',
})
// 圆环图
export default class CirqueChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            tooltip: {
                trigger: 'item',
                formatter: function(param) {
                    console.log(param, 'param');

                    return param.marker + '&nbsp' + param.name + '&nbsp' + param.percent + '%' + '&nbsp' + thousandsFormat(param.data?.value) + '条';
                },
                confine: true,
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },
            legend: {
                orient: 'vertical',
                icon: 'circle',
                left: '58%',
                top: 'center',
                itemHeight: 8,
                // itemWidth: 8, // 修改icon图形大小
                // selectedMode: false,
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 12,
                            align: 'left',
                            width: 50,
                            padding: [0, 0, 0, -10],
                            fontWeight: 500,
                            color: 'rgba(0,0,0,.65)',
                        },
                        b: {
                            fontSize: 12,
                            overfloow: 'truncate',
                            fontWeight: 500,
                            color: 'rgba(0,0,0,.65)',
                        },
                    },
                },
                z: 1001,
                // selectedMode: false,
                tooltip: {
                    show: true,
                    // trigger: 'item',
                    // formatter: function(param) {
                    //     let data = _this.data.data.find(item => item.name === param.name);
                    //     return (
                    //         // param.marker +
                    //         // '&nbsp' +
                    //         data.name + '&nbsp' + (data?.instructionNum || '0') + '笔' + '&nbsp' + (data?.formatValue || '')
                    //     );
                    // },
                    backgroundColor: 'rgba(255,255,255,0.8)',
                    borderColor: 'rgba(0,0,0,0.1)',
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
                },
            },
            color: ['#FFE773', '#5FB2FF', '#69FFED', '#A956FF', '#F47B8F'],
            series: [
                {
                    type: 'pie',
                    radius: ['41%', '66%'],
                    center: ['29%', '50%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    label: {
                        normal: {
                            show: false,
                            formatter: '{d}%',
                            textStyle: {
                                color: 'rgba(0,0,0,.45)',
                                fontSize: 12,
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        smooth: 0.2,
                        length: 5,
                        length2: 6,
                    },
                    data: [],
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        let that = this;
        this.chartInstance.on('legendselectchanged', function(params) {
            // 前面配置项没定义selected，需先定义，否则找不到对象会报错
            const dataOption = {
                legend: {
                    selected: {},
                },
            };
            dataOption.legend.selected[params.name] = true; // 相当于取消点击事件
            that.chartInstance.setOption(dataOption);
        });
    }
    updateChart(e) {
        const dataOption = {
            series: [{ data: e.data }],
            legend: e.legend,
            color: e.color,
            textStyle: e.textStyle,
        };
        this.chartInstance.setOption(dataOption);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
